import React, { Component } from 'react';
import {
	StyleSheet, View, Text,
	Image, TouchableOpacity, ScrollView
} from "react-native";
import { GLOBAL } from '../../config/global';
import { style } from '../../theme/style';

const scale = GLOBAL.SCALE;
export class PageListRadio extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectIndex: this.props.selectIndex
		}
	}

	_selectCallBack = (index) => {
		var This = this;
		this.setState({
			selectIndex: index
		}, () => {
			setTimeout(() => {
				this.props.selectCallBack(index);
			}, 100)
		})
	}
	render() {
		let { listData, title, selectCallBack } = this.props;
		let { selectIndex } = this.state;

		let rightImg = require('../../imgs/global/success.png');
		let emptyImg = require('../../imgs/global/option.png');
		console.log('listData-底层', listData)
		return (
			<View style={[styles.bombBody, { maxHeight: '50%' }]}>
				{title.length ? <Text style={styles.bombTitle}>{title}</Text> : null}
				<ScrollView>
					{
						listData && listData.length > 0 ? (
							listData.map((item, index) => {
								return (
									<TouchableOpacity key={index} style={styles.bombList} onPress={() => { this._selectCallBack(index); }}>
										<Text style={styles.bombTextFont}>{item.dictName || item}</Text>
										<Image style={styles.bombImg} source={selectIndex == index ? rightImg : emptyImg} />
									</TouchableOpacity>
								)
							})
						) : (<Text>暂无数据</Text>)
					}
				</ScrollView>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	bombBody: {
		width: 300 * scale,
		paddingLeft: 25 * scale,
		paddingRight: 17 * scale,
		paddingBottom: 30 * scale,
		backgroundColor: style.color.white,
		borderRadius: 13 * scale
	},
	bombTitle: {
		fontSize: 12 * scale,
		color: style.color.darkGray,
		paddingTop: 15 * scale,
		paddingBottom: 15 * scale
	},
	bombList: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		paddingTop: 10 * scale,
		paddingBottom: 10 * scale,
		paddingRight: 8 * scale,
	},
	bombImg: {
		width: 14 * scale,
		height: 14 * scale,
	},
	bombTextFont: {
		fontSize: 13 * scale,
		color: style.color.dark,
		width: '90%'
	},
	selectStyle: {
		width: 13 * scale,
		height: 7 * scale,
		marginLeft: 5 * scale
	},
	close: {
		position: 'absolute',
		right: 15 * scale,
		top: 15 * scale,
	}
})